<script setup lang="ts">
import SideBar from './components/SideBar/index.vue'

import { useUserStore } from '/@/store'

import { onMounted, ref } from 'vue'

const centerDialogVisible = ref(false)

const store = useUserStore()

/**
 * 登录用户
 */
const login = () => {
  centerDialogVisible.value = false
  store.login(form.value.username, form.value.password)
}

interface formType {
  username: string
  password: string
}

const form = ref<formType>({
  username: '',
  password: '',
})

onMounted(() => {
  form.value.username = 'admin'
  form.value.password = '123'
  login()
})
</script>

<template>
  <div class="chat">
    <div class="chat-card">
      <el-container class="el-container">
        <el-aside class="aside" width="70px">
          <SideBar></SideBar>
        </el-aside>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>

    <el-dialog
      v-model="centerDialogVisible"
      title="登录账户"
      width="30%"
      center
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="form.password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="login"> 登录 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.aside {
  padding: 0;
}
.chat {
  background-color: #f5f7fa;
  height: 100vh;
  min-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-card {
  width: 95%;
  height: 100%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.row {
  height: 100%;
}

.main {
  padding: 0;
  background: #ffffff;
}

.aside {
  padding: 0;
  background: #2c3e50;
  border-right: 1px solid #eaeaea;
}
</style>
